<template>
  <div id="data-view">
    <!-- <dv-full-screen-container> -->
    <el-container>
      <el-header>
        <el-row style="color: #4ea1ca">
          <el-col :span="9" style="margin-top: 15px;cursor: pointer;font-size: 18px;">
            <div style="width: 100%;border-bottom: 3px solid #173269;padding-bottom: 15px;">
              <span @click="open = true"> {{ semesterInfo.name }}</span>
              <i class="el-icon-refresh" style="padding-left: 5px;" @click="initialTime"></i>
            </div>
          </el-col>

          <!-- <el-col :span="3"><dv-decoration-8 style="width:100%;height:50px;" /></el-col> -->
          <el-col :span="6">
            <dv-decoration-11 style="width:100%;height:80px;">
              <!-- <span class="htmlFont">实 践 数 据 平 台</span> -->
              <span class="htmlFont">综合素质实践管理平台</span>
            </dv-decoration-11>
          </el-col>
          <!-- <el-col :span="3"><dv-decoration-8 :reverse="true" style="width:100%;height:50px;" /></el-col> -->

          <el-col :span="9" style="margin-top: 15px;font-size: 20px;">
            <div style="width: 100%;border-bottom: 3px solid #173269;padding-bottom: 15px;">
              {{ gettime }}
            </div>
          </el-col>
          <!-- <el-col :span="1"><el-button @click="exit" type="text">关闭</el-button></el-col> -->
        </el-row>
      </el-header>

      <el-main>
        <el-row style="height: 48vh;" :gutter="20" id="rowHeight">
          <el-col :span="8" style="height:100%">
            <!-- <dv-border-box-12 style="height:100%; overflow: hidden;"> -->
            <div class="borderStyle">
              <div class="listTitle">排行榜</div>
              <dv-scroll-board :config="config" :style="{ 'height': configHeight + 'px' }" style="overflow: hidden;" />
            </div>
            <!-- </dv-border-box-12> -->
          </el-col>
          <el-col :span="8" style="height: 100%;display: flex;flex-direction: column;margin-top: 20px;">
            <el-row style="display:flex; justify-content: space-between">
              <el-col :span="5">
                <div class="centerTitle">
                  <div v-if="taskNum < 10" class="centerNum">
                    <span>{{ taskNum }}</span>
                  </div>
                  <div v-if="taskNum < 100 && taskNum > 9" class="centerNum">
                    <span>{{ String(taskNum)[0] }}</span>
                    <span>{{ String(taskNum)[1] }}</span>
                  </div>
                  <div v-if="taskNum < 1000 && taskNum > 99" class="centerNum">
                    <span>{{ String(taskNum)[0] }}</span>
                    <span>{{ String(taskNum)[1] }}</span>
                    <span>{{ String(taskNum)[2] }}</span>
                  </div>
                  <div v-if="taskNum < 10000 && taskNum > 999" class="centerNum">
                    <span>{{ String(taskNum)[0] }}</span>
                    <span>{{ String(taskNum)[1] }}</span>
                    <span>{{ String(taskNum)[2] }}</span>
                    <span>{{ String(taskNum)[3] }}</span>
                  </div>
                </div>
                <div class="centerText">发 布 任 务</div>
              </el-col>
              <el-col :span="5">
                <div class="centerTitle">
                  <div v-if="bankNum < 10" class="centerNum">
                    <span>{{ bankNum }}</span>
                  </div>
                  <div v-if="bankNum < 100 && bankNum > 9" class="centerNum">
                    <span>{{ String(bankNum)[0] }}</span>
                    <span>{{ String(bankNum)[1] }}</span>
                  </div>
                  <div v-if="bankNum < 1000 && bankNum > 99" class="centerNum">
                    <span>{{ String(bankNum)[0] }}</span>
                    <span>{{ String(bankNum)[1] }}</span>
                    <span>{{ String(bankNum)[2] }}</span>
                  </div>
                  <div v-if="bankNum < 10000 && bankNum > 999" class="centerNum">
                    <span>{{ String(bankNum)[0] }}</span>
                    <span>{{ String(bankNum)[1] }}</span>
                    <span>{{ String(bankNum)[2] }}</span>
                    <span>{{ String(bankNum)[3] }}</span>
                  </div>
                </div>
                <div class="centerText">发 布 试 卷</div>
              </el-col>
              <el-col :span="6">
                <div class="centerTitle">
                  <div v-if="studentNum < 10" class="centerNum">
                    <span>{{ studentNum }}</span>
                  </div>
                  <div v-if="studentNum < 100 && studentNum > 9" class="centerNum">
                    <span>{{ String(studentNum)[0] }}</span>
                    <span>{{ String(studentNum)[1] }}</span>
                  </div>
                  <div v-if="studentNum < 1000 && studentNum > 99" class="centerNum">
                    <span>{{ String(studentNum)[0] }}</span>
                    <span>{{ String(studentNum)[1] }}</span>
                    <span>{{ String(studentNum)[2] }}</span>
                  </div>
                  <div v-if="studentNum < 10000 && studentNum > 999" class="centerNum">
                    <span>{{ String(studentNum)[0] }}</span>
                    <span>{{ String(studentNum)[1] }}</span>
                    <span>{{ String(studentNum)[2] }}</span>
                    <span>{{ String(studentNum)[3] }}</span>
                  </div>
                  <div v-if="studentNum < 100000 && studentNum > 9999" class="centerNum">
                    <span>{{ String(studentNum)[0] }}</span>
                    <span>{{ String(studentNum)[1] }}</span>
                    <span>{{ String(studentNum)[2] }}</span>
                    <span>{{ String(studentNum)[3] }}</span>
                    <span>{{ String(studentNum)[4] }}</span>
                  </div>
                </div>
                <div class="centerText">参 与 学 生</div>
              </el-col>
            </el-row>
            <el-row style="flex: 1">
              <el-col :span="24" style="height: 100%">
                <div class="wave-container">
                  <div class="centerRate">
                    <!-- <div style="margin-bottom: 10px;">{{ studentParticipationRate }}</div> -->
                    <dv-flyline-chart-enhanced :config="config"
                      style="width:100%;height:100%;"></dv-flyline-chart-enhanced>
                    <div class="shop_wrap shop_wrap1">
                      <div class="TheCircle">
                        <div class="Water">
                          <!-- <div class="CenteredText" :style="{ 'color': canyulv < 0.5 ? '#008cf6' : '#fff' }"> -->
                          <div class="CenteredText" style="color: #fff">
                            <span>{{ studentParticipationRate }}</span>
                            <span style="font-size: 18px;">参与率</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8" style="height:100%;">
            <!-- <dv-border-box-12 style="height:100%;padding-bottom: 5px;"> -->
            <div class="borderStyle">
              <div class="listTitle">学生参与趋势图(人数)</div>
              <div id="current"></div>
            </div>
            <!-- </dv-border-box-12> -->
          </el-col>
        </el-row>
      </el-main>

      <el-footer style="height: 42vh;">
        <el-row :gutter="20" style="height: 100%;">
          <el-col :span="7" style="height: 100%;">
            <!-- <dv-border-box-12 class="footPadding"> -->
            <div class="footPadding borderStyle">
              <div class="listTitle">实践任务发布占比</div>
              <div id="footLeft" style="height: 100%;"></div>
            </div>
            <!-- </dv-border-box-12> -->
          </el-col>
          <el-col :span="10" style="height: 100%;">
            <!-- <dv-border-box-12 class="footPadding"> -->
            <div class="footPadding borderStyle">
              <div class="listTitle">面向学院发布数量</div>
              <div id="chartRef" style="height: 100%;"></div>
            </div>
            <!-- </dv-border-box-12> -->
          </el-col>
          <el-col :span="7" style="height: 100%;">
            <!-- <dv-border-box-12 class="footPadding"> -->
            <div class="footPadding borderStyle">
              <div class="listTitle">试卷数量发布占比</div>
              <div id="footRight" style="height: 100%;"></div>
            </div>
            <!-- </dv-border-box-12> -->
          </el-col>
        </el-row>
      </el-footer>

    </el-container>
    <!-- </dv-full-screen-container> -->


    <el-dialog title="选择学期" :visible.sync="open" width="420px">
      <dv-border-box-10>
        <el-form>
          <el-form-item label="学 期:">
            <el-select v-model="semesterId" placeholder="请选择">
              <el-option v-for="item in timeDataList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="trueBtn">确 定</el-button>
            <el-button @click="open = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </dv-border-box-10>
    </el-dialog>
  </div>
</template>

<script>
import { getSemesterList } from "@/api/semesManage";
import { studentRanking, getIssueInfo, getStudentTrend, getPaperPropor, getBankPropor, getFaceXy } from "@/api/largeDataScreen";
export default {
  name: 'DataView',
  data() {
    return {
      gettime: '',
      open: false,
      semesterInfo: {},
      timeDataList: [],
      semesterId: null,
      setInte: null,
      taskNum: 0,
      bankNum: 0,
      studentNum: 0,
      studentParticipationRate: '0%',
      canyulv: 0,
      config: {
        header: ['排名', '姓名', '班级', '积分'],
        data: [],
        rowNum: 8,
        headerHeight: 30,
        waitTime: 1000,
        // index: true,
        columnWidth: [60],
        headerBGC: 'transparent',
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        align: 'center'
      },
      configHeight: 300,
      monthList: [],
      monthValueList: [],
      colleges: [],
      activityData: [],
      questionData: [],
      myChart: null,
      footLeftChart: null,
      footRightChart: null,
    }
  },
  created() {
    this.queryTime();
    this.initialTime();
  },
  mounted() {
    const that = this;
    setInterval(async () => {
      await that.resetPage();
      await that.getAllData();
    }, 1800000);
  },
  beforeDestroy() {
    // clearInterval(this.setInte)
    // if (this.myChart) {
    //   this.myChart.dispose(); // 销毁实例
    // }
    // if (this.footLeftChart) {
    //   this.footLeftChart.dispose(); // 销毁实例
    // }
    // if (this.footRightChart) {
    //   this.footRightChart.dispose(); // 销毁实例
    // }
    // window.removeEventListener("resize", this.resizeChart);

    this.resetPage();
  },
  methods: {
    async initialTime() {
      // const now = new Date();
      // let currentPeriod = null;
      // for (const period of this.timeDataList) {
      //   const startTime = new Date(period.startTime);
      //   const endTime = new Date(period.endTime);
      //   if (now >= startTime && now <= endTime) {
      //     currentPeriod = period;
      //     break;
      //   }
      // }
      // this.semesterInfo = { ...currentPeriod };

      await this.getSemesterList();
      await this.resetPage();
      await this.getAllData();
    },
    getSemesterList() {
      getSemesterList().then((res) => {
        this.timeDataList = res.data;
        if (res.data.length == 0) return;
        const nowVale = res.data.find(v => new Date(v.startTime).getTime() <= new Date().getTime() && new Date().getTime() <= new Date(v.endTime).getTime());
        if (nowVale) {
          this.semesterId = this.semesterInfo.id = nowVale.id;
          this.semesterInfo.name = nowVale.name;
        } else {
          this.semesterId = this.semesterInfo.id = res.data[0].id;
          this.semesterInfo.name = res.data[0].name;
        }
      });
    },
    trueBtn() {
      this.semesterInfo = this.timeDataList.find(v => v.id === this.semesterId);
      this.resetPage();
      this.getAllData();
      this.open = false;
    },
    async getAllData() {
      // startTime: this.semesterInfo.startTime, endTime: this.semesterInfo.endTime
      await studentRanking({ semesterConfigId: this.semesterId }).then(res => {
        if (res.code === 200) {
          this.config.data = res.data.map((v, i) => ([i + 1, v.studentUserName, v.bjName, v.score]));
          this.config = { ...this.config };
        }
      });
      await getIssueInfo({ semesterConfigId: this.semesterId }).then(res => {
        if (res.code === 200) {
          this.taskNum = res.data.taskNumber;
          this.bankNum = res.data.testPaperNumber;
          this.studentNum = res.data.studentNumber;
          this.studentParticipationRate = (res.data.studentParticipationRate * 100) + '%';
          this.canyulv = res.data.studentParticipationRate;

          this.$nextTick(() => {// 获取 .Water 的引用
            var water1 = document.querySelector('.shop_wrap1 .Water');

            water1.style.setProperty('--after-top', 40 - res.data.studentParticipationRate * 100 + '%');
            water1.style.setProperty('--before-top', 40 - res.data.studentParticipationRate * 100 + '%');
          })
        }
      });
      await getStudentTrend({ semesterConfigId: this.semesterId }).then(res => {
        if (res.code === 200) {
          this.monthList = res.data.map(v => v.month);
          this.monthValueList = res.data.map(v => v.studentNumber);
        }
      });
      await getPaperPropor({ semesterConfigId: this.semesterId }).then(res => {
        if (res.code === 200) {
          this.questionData = res.data.map(v =>
          ({
            name: v.typeName,
            // name: v.type == 1 ? '劳动教育' : v.type == 2 ? '职业素养' : v.type == 3 ? '应急安全' : v.type == 4 ? '思政实践' : '创新创业',
            value: v.number
          }))
        }
      });
      await getBankPropor({ semesterConfigId: this.semesterId }).then(res => {
        if (res.code === 200) {
          this.activityData = res.data.map(v =>
          ({
            name: v.typeName,
            // name: v.type == 1 ? '劳动教育' : v.type == 2 ? '职业素养' : v.type == 3 ? '应急安全' : v.type == 4 ? '思政实践' : '创新创业',
            value: v.number
          }))
        }
      });
      await getFaceXy({ semesterConfigId: this.semesterId }).then(res => {
        if (res.code === 200) {
          this.colleges = res.data.map(v => ({ name: v.xyName, activityCount: v.testPaperNumber, paperCount: v.practiceTaskNumber }));
          this.setInte = setInterval(() => { this.queryTime() }, 1000)
          this.$nextTick(() => {
            setTimeout(() => {
              this.currentChart();
              this.initChart();
              this.footLeft();
              this.footRight();
            }, 0);
          });
        }
      });

    },
    // 获取时间
    queryTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1;
      let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
      let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
    },
    currentChart() {
      //配置echarts
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{a} <br/>{b} : {c}'
        },
        title: {
          text: '',
          x: '2%',
          y: '0',
          // left: "center",
          textStyle: {
            color: '#fff', // 设置标题文字颜色为白色
            fontSize: 18,
            backgroundColor: 'rgba(255, 255, 255, 0.1)', // 背景颜色
            borderRadius: 5, // 背景圆角
            padding: [10, 20], // 内边距
          },
          subtextStyle: {
            color: '#FFFFFF', // 子文本颜色
            fontSize: 14, // 子文本大小
          },
          itemStyle: {
            color: '#00f', // 图标颜色
          },
        },
        xAxis: {
          data: this.monthList,
          type: 'category',
          axisLabel: {
            // rotate: 10,
            interval: 0,
            textStyle: {
              color: '#FFFFFF',
            }
          },
          axisLine: {
            lineStyle: {
              color: '#142452' // 修改 X 轴线的颜色
            }
          }
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 'dataMax',
          axisLabel: {
            textStyle: {
              color: '#FFFFFF',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#142452'
            }
          }
        },
        series: [
          {
            name: '学生参与人数',
            data: this.monthValueList,
            type: 'line',
            itemStyle: {
              color: '#ffdc60' // 设置数据点颜色为绿色
            },
          }
        ]
      };
      const costExpensesEcharts = document.getElementById("current");
      costExpensesEcharts.style.width = "100%";
      costExpensesEcharts.style.height = "90%";
      const chart = this.$echarts.init(costExpensesEcharts);
      chart.setOption(option);
      this.configHeight = document.getElementById('rowHeight').offsetHeight;
      // 手动监听窗口大小变化事件
      window.addEventListener('resize', function () {
        chart.resize();
      });
    },
    // 底部左边
    footLeft() {
      if (this.footLeftChart) {
        this.footLeftChart.dispose(); // 销毁旧实例
      }

      // 图表配置
      const option = {
        title: {
          text: "",
          textStyle: {
            color: "#FFFFFF", // 标题字体颜色
            fontSize: 18,
          },
          padding: [10, 0, 0, 0]
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          show: false,
          orient: "vertical",
          left: "left",
          data: this.activityData.map((item) => item.name),
        },
        series: [
          {
            name: "活动类型",
            type: "pie",
            radius: "50%",
            center: ['50%', '40%'],
            data: this.activityData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              formatter: "{b|{b}} \n{d|{d}%}",
              rich: {
                b: {
                  fontSize: 14,
                  color: "#FFFFFF",
                  lineHeight: 20,
                },
                d: {
                  fontSize: 14,
                  color: "#FFFFFF",
                  lineHeight: 20,
                },
              },
            },
          },
        ],
      };

      const costExpensesEcharts = document.getElementById("footLeft");
      costExpensesEcharts.style.width = "100%";
      costExpensesEcharts.style.height = "100%";
      this.footLeftChart = this.$echarts.init(costExpensesEcharts);
      this.footLeftChart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener("resize", this.resizeChart);
    },
    // 底部右边
    footRight() {
      if (this.footRightChart) {
        this.footRightChart.dispose(); // 销毁旧实例
      }

      // 图表配置
      const option = {
        title: {
          text: "",
          // left: "center",
          textStyle: {
            color: "#FFFFFF", // 标题字体颜色
            fontSize: 18,
          },
          padding: [10, 0, 0, 0]
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        // grid: {
        //   top: "5%",
        //   bottom: "3%",
        //   containLabel: true,
        // },
        legend: {
          show: false,
          orient: "vertical",
          left: "left",
          data: this.questionData.map((item) => item.name),
        },
        series: [
          {
            name: "试题类型",
            type: "pie",
            radius: "50%",
            center: ['50%', '40%'],
            data: this.questionData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              formatter: "{b|{b}} \n{d|{d}%}",
              rich: {
                b: {
                  fontSize: 14,
                  color: "#FFFFFF",
                  lineHeight: 20,
                },
                d: {
                  fontSize: 14,
                  color: "#FFFFFF",
                  lineHeight: 20,
                },
              },
            }
          },
        ],
      };

      const costExpensesEcharts = document.getElementById("footRight");
      costExpensesEcharts.style.width = "100%";
      costExpensesEcharts.style.height = "100%";
      this.footRightChart = this.$echarts.init(costExpensesEcharts);
      this.footRightChart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener("resize", this.resizeChart);
    },
    // 底部中间
    initChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
      const dataMax = Math.max(...this.colleges.map((item) => Math.max(item.activityCount, item.paperCount)));
      let splitNumber = Math.min(5, Math.ceil(dataMax));
      splitNumber = splitNumber < 1 ? 1 : splitNumber;
      // 图表配置
      const option = {
        title: {
          text: "",
          textStyle: {
            color: "#FFFFFF",
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["任务数量", "试卷数量"],
          textStyle: {
            color: "#FFFFFF",
          },
          bottom: 'bottom', // 将图例放置在底部
        },
        grid: {
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.colleges.map((item) => item.name),
          axisLabel: {
            rotate: 20,
            margin: 15,
            padding: [0, -20, 0, 0],
            interval: 0,
            textStyle: {
              color: '#FFFFFF',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#142452' // 修改 X 轴线的颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 'dataMax',
          splitNumber: splitNumber,
          axisLabel: {
            formatter: function (value) {
              return Math.ceil(value) + ' 个';
            },
            textStyle: {
              color: '#FFFFFF',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#142452'
            }
          }
        },
        series: [
          {
            name: "任务数量",
            type: "bar",
            data: this.colleges.map((item) => item.paperCount),
            label: {
              show: true,
              position: "insideTop",
            },
            itemStyle: {
              borderRadius: [10, 10, 0, 0], // 设置顶部圆角
            },
          },
          {
            name: "试卷数量",
            type: "bar",
            data: this.colleges.map((item) => item.activityCount),
            label: {
              show: true,
              position: "insideTop",
              color: '#fff'
            },
            itemStyle: {
              borderRadius: [10, 10, 0, 0], // 设置顶部圆角
            },
          },
        ],
      };


      const costExpensesEcharts = document.getElementById("chartRef");
      costExpensesEcharts.style.width = "100%";
      costExpensesEcharts.style.height = "85%";
      this.myChart = this.$echarts.init(costExpensesEcharts);
      this.myChart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener("resize", this.resizeChart);
    },
    resizeChart() {
      if (this.myChart) {
        this.myChart.resize();
      }
      if (this.footLeftChart) {
        this.footLeftChart.resize();
      }
      if (this.footRightChart) {
        this.footRightChart.resize();
      }
    },
    exit() {
      this.$router.push('/')
    },
    // 重置页面
    resetPage() {
      clearInterval(this.setInte)
      if (this.myChart) {
        this.myChart.dispose(); // 销毁实例
      }
      if (this.footLeftChart) {
        this.footLeftChart.dispose(); // 销毁实例
      }
      if (this.footRightChart) {
        this.footRightChart.dispose(); // 销毁实例
      }
      window.removeEventListener("resize", this.resizeChart);
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep.dv-scroll-board {
  .rows {
    display: block !important;
    height: 100% !important;
  }
}

#app {
  height: 100% !important;
}

.htmlFont {
  font-weight: bold;
  font-size: 30px;
  color: white;
  font-style: italic;
  padding: 10px;
}

#data-view {
  // width: 100%;
  height: 100%;
  // background-color: rgba(0, 0, 0, 0);
  background-color: #00043a;
  color: #d9d9e5;
  overflow: auto;
  padding-bottom: 50px !important;

  #dv-full-screen-container {
    overflow: auto;
    padding-top: 15px !important;
    margin: 0;
    margin-bottom: 150px !important;
    background-color: #00043a;
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
}

.main_row {
  height: 100%;

  .el-col {
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0);

    .el-row {
      border: 1px solid rgba(255, 255, 255, 0);
    }
  }

  .left>.el-row {
    height: 33%;
  }

  .center {
    .map {
      height: 66%;
    }

    .alert {
      height: 33%;
    }
  }

  .right>.el-row {
    height: 49.5%;
  }
}

.peakTitle {
  text-align: left;
  padding-top: 25px;
  padding-left: 28px;
  line-height: normal;
}

.peakContent {
  height: 85%;
  display: flex;
  flex-direction: column;
  padding: 5px 30px;
  box-sizing: border-box;

  .peakBranch {
    flex: 1;
    padding: 5px 0;
    line-height: normal;

    .elRow {
      height: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-top: 20px !important;

      .el-col {
        flex: 1;
      }

      .elCol1 {
        font-size: 24px;
      }

      .elCol2 {
        font-size: 12px;
      }

      .elCol3 {
        color: #fff;
      }
    }
  }
}

.wave-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.centerTitle {
  font-size: 32px;
  // padding: 8px;

  // border: 1px solid #fff;
  // margin-bottom: 5px;
  .centerNum {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;

    span {
      // flex: 1;
      color: #fff;
      display: inline-block;
      padding: 8px;
      background-color: #008cf6;
      margin-right: 5px;
      border-radius: 5px;
    }
  }
}

.centerText {
  font-weight: bold;
  color: #00eeff
}

.centerRate {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  // border: 1px solid #fff;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.el-row {
  padding: 0;
  margin: 0
}

.el-row .el-col .el-row {
  padding: 4px
}

.el-col {
  border-radius: 4px;
  margin: 0
}

.el-header,
.el-footer {
  color: #d9d9e5;
  text-align: center;
}

.el-main {
  overflow: hidden;
  color: #d9d9e5;
  text-align: center;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

.footPadding {
  // padding: 10px;
  box-sizing: border-box;
}

.borderStyle {
  height: 100%;
  overflow: hidden;
  border: 2px solid #2e6099
}

::v-deep .el-dialog {
  margin-top: 20vh !important;
  background: #00043a;

  .el-dialog__body {
    padding: 0 !important;
  }

  .el-dialog__header {
    display: none;
  }
}

::v-deep .el-form {
  padding: 15px !important;
  padding-bottom: 5px !important;
  text-align: center;

  .el-form-item {
    margin: 5px !important;
    padding: 5px !important;
  }

  .el-form-item::after {
    margin-top: 15px !important;
  }
}

.shop_wrap {
  width: max-content;
  padding: 3px;
  /* 设置外层容器的内边距 */
  // background: linear-gradient(360deg, #0055ff 0%, #33eeff);
  border-radius: 50%;

  .TheCircle {
    position: relative;
    width: 200px;
    /* 设置圆形容器的宽度 */
    height: 200px;
    /* 设置圆形容器的高度 */
    //padding: 2px;
    box-sizing: border-box;
    border-radius: 50%;
    /* 圆形容器的圆角半径 */
    // border: 1px solid #fff;
    // box-shadow: 0 0 0 1px #fff;
    overflow: hidden;
    cursor: pointer;
  }

  .Water {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: #38b973;
    /* 水波纹的颜色 */
    // background: linear-gradient(360deg, #7892dd, #008cf6);
    // background: linear-gradient(360deg, #0055ff 0%, #33d6ff 100%, #33d6ff 80%);
    background: rgb(25, 63, 178);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
  }

  .CenteredText {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 32px;
    height: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .Water::after {
    content: '';
    position: absolute;
    //top: 0;
    top: var(--after-top, 0);
    left: 50%;
    width: 162%;
    height: 162%;
    border-radius: 40%;
    // background-color: rgb(255, 255, 255);
    // background-color: #4ea1ca;
    background-color: #81a7f3;
    /* 水波纹内部颜色 */
    animation: real 5s linear infinite;
    /* 实际水波纹的动画效果 */
  }

  @keyframes real {
    0% {
      /* 初始状态：向上平移50%、左平移65%并旋转0度 */
      transform: translate(-50%, -66%) rotate(0deg);
    }

    100% {
      /* 终止状态：向上平移50%、左平移65%并旋转360度，形成旋转一周的效果 */
      transform: translate(-50%, -66%) rotate(360deg);
    }
  }

  .Water::before {
    content: '';
    position: absolute;
    //top: 0;
    top: var(--before-top, 0);
    /* 使用 CSS 变量 */
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 42%;
    //background-color: rgb(240, 228, 228, 0.2); /* 水波纹外部颜色及透明度 */
    background: linear-gradient(360deg, #a3c0ff 0%, #acecff 100%, #a1ebff 91%);
    opacity: 1;
    animation: virtual 8s linear infinite;
  }

  @keyframes virtual {
    0% {
      transform: translate(-50%, -60%) scale(1) rotate(0deg);
    }

    100% {
      transform: translate(-50%, -60%) scale(1) rotate(360deg);
    }
  }
}

.listTitle {
  padding-top: 10px;
  padding-bottom: 5px;
  margin-left: 20px;
  font-size: 18px;
  font-weight: bolder;
  text-align: left;
  color: #fff;
  display: flex;
  align-items: center;
}

.listTitle::before {
  content: '';
  width: 5px;
  height: 25px;
  background-color: #419eff;
  margin-right: 10px;
  display: inline-block;
}


::-webkit-scrollbar {
  width: 2px;
}

body {
  ::-webkit-scrollbar {
    width: 2px;
  }
}
</style>
